<div class="content">
    <div id="example_title">
        <h1>Level Padding</h1>
        You can customize the padding for nested nodes.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="sidebar" style="height: 600px; width: 200px; float: left"></div>
<div style="margin-left: 220px;">
    <button class="w2ui-btn" onclick="set(0)">Flat</button>
    <button class="w2ui-btn" onclick="set(20)">Default</button>
    <button class="w2ui-btn" onclick="inc(1)">Increase</button>
    <button class="w2ui-btn" onclick="inc(-1)">Decrease</button>
</div>
<div style="clear: both"/>

<!--CODE-->
<script type="module">
import { w2sidebar, query } from '__W2UI_PATH__'

let sidebar = new w2sidebar({
    box: '#sidebar',
    name: 'sidebar',
    levelPadding: 20,
    nodes: [
        { id: 'level-1', text: 'Level 1', expanded: true, group: true,
            nodes: [
                { id: 'level-1-1', text: 'Level 1.1', icon: 'fa fa-folder-o', expanded: true,
                    nodes: [
                        { id: 'level-1-1-1', text: 'Level 1.1.1', icon: 'fa fa-star-o', count: 5 },
                        { id: 'level-1-1-2', text: 'Level 1.1.2', icon: 'fa fa-star-o', count: 6 },
                        { id: 'level-1-1-3', text: 'Level 1.1.3', icon: 'fa fa-star-o', count: 12 }
                    ]
                },
                { id: 'level-1-2', text: 'Level 1.2', icon: 'fa fa-folder-o', expanded: true,
                    nodes: [
                        { id: 'level-1-2-1', text: 'Level 1.2.1', icon: 'fa fa-star-o' },
                        { id: 'level-1-2-2', text: 'Level 1.2.2', icon: 'fa fa-star-o' },
                        { id: 'level-1-2-3', text: 'Level 1.2.3', icon: 'fa fa-star-o' }
                    ]
                },
                { id: 'level-1-3', text: 'Level 1.3', icon: 'fa fa-folder-o', expanded: true,
                    nodes: [
                        { id: 'level-1-3-1', text: 'Level 1.3.1', icon: 'fa fa-star-o' },
                        { id: 'level-1-3-2', text: 'Level 1.3.2', icon: 'fa fa-star-o' },
                        { id: 'level-1-3-3', text: 'Level 1.3.3', icon: 'fa fa-star-o' }
                    ]
                }
            ]
        },
        { id: 'level-2', text: 'Level 2', group: true,
            nodes: [ { id: 'level-2-1', text: 'Level 2.1', icon: 'fa fa-star-o' },
                    { id: 'level-2-2', text: 'Level 2.2', icon: 'fa fa-star-o' },
                    { id: 'level-2-3', text: 'Level 2.3', icon: 'fa fa-star-o' }
                    ]
        },
        { id: 'level-3', text: 'Level 3', group: true,
            nodes: [ { id: 'level-3-1', text: 'Level 3.1', icon: 'fa fa-star-o' },
                    { id: 'level-3-2', text: 'Level 3.2', icon: 'fa fa-star-o' },
                    { id: 'level-3-3', text: 'Level 3.3', icon: 'fa fa-star-o' }
                    ]
        }
    ],
    onFocus(event) {
        console.log('focus', event)
        query('#hasFocus').html('<span style="background-color: #eee; padding: 5px; border-radius: 3px;">HAS FOCUS</span>')
    },
    onBlur(event) {
        console.log('blur', event)
        query('#hasFocus').html('')
    }
})

window.inc = function(val) {
    sidebar.levelPadding = sidebar.levelPadding + val
    if (sidebar.levelPadding < 0) sidebar.levelPadding = 0
    sidebar.refresh()
}

window.set = function(val) {
    sidebar.levelPadding = val
    sidebar.refresh()
}
</script>
